<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Mouse drag start
	and drag end</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
#map_canvas {
	width: 400px;
	height: 300px;
}

#current {
	padding-top: 25px;
}
</style>
<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	function initialize() {
		var map = new google.maps.Map(document.getElementById('map_canvas'), {
			zoom : 1,
			center : new google.maps.LatLng(35.137879, -82.836914),
			mapTypeId : google.maps.MapTypeId.ROADMAP
		});

		var myMarker = new google.maps.Marker({
			position : new google.maps.LatLng(47.651968, 9.478485),
			draggable : true
		});

		google.maps.event
				.addListener(
						myMarker,
						'dragend',
						function(evt) {
							document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: '
									+ evt.latLng.lat().toFixed(3)
									+ ' Current Lng: '
									+ evt.latLng.lng().toFixed(3) + '</p>';
						});

		google.maps.event
				.addListener(
						myMarker,
						'dragstart',
						function(evt) {
							document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
						});

		map.setCenter(myMarker.position);
		myMarker.setMap(map);
	}

	google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
	<div id='map_canvas'></div>
	<div id="current">Nothing yet...</div>
</body>
</html>
